<template>
	<div>
		<!-- 把最大数量绑定为库存数,需要传递过来,先取消 -->
		<div class="mui-numbox" data-numbox-min='1' :data-numbox-max='shopmax' style="height: 25px;">
			<button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
			<input id="test" class="mui-input-numbox" type="number" :value="now_count" 
			ref="number" @change="changenumber"/>
			<button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
		</div>
	</div>
</template>

<script>
	import mui from '../../lib/mui/js/mui.js'
	export default{
		mounted(){
			// 初始化数字选择框组件
			mui('.mui-numbox').numbox()
		},
		methods:{
			changenumber(){
				console.log(this.$refs.number.value)
				// 每当数量值改变，立刻把最新的数量同步到购物车的store中，覆盖最新的数量值
				this.$store.commit('updateGoodsinfo',{
					id:this.goodid,
					count:this.$refs.number.value
				})
			},
			
		},
		props:["shopmax","now_count","goodid"],
		watch:{
			// 监听父组件传递的shopmax值
			shopmax:function(newAvl,oldAvl){
				//无论max值变化多少次， max值都取新值
				mui('.mui-numbox').numbox().setOption("shopmax",newAvl)
			}
		},
		
	}
</script>

<style lang="scss" scoped>
</style>
